<template>
	<!-- 新增 -->
	<el-dialog
		title="批量导入"
		:visible.sync="dialog"
		width="450px">
		<!-- 内容 -->
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="80px"
			class="new">
			<div class="group">
				<el-form-item label="标签名称" prop="name">
					<el-button
						@click="openExl"
						type="primary"
						plain
						size="small">选择文件
					</el-button>
					<input
						@change="getFile($event)"
						type="file"
						ref="file"
						class="upload"
						accept=".csv, application/vnd.ms-excel">
					<p>{{fileName}}</p>
				</el-form-item>
			</div>
			<div class="group">
				<el-form-item label="上级标签" prop="lead">
					<el-select
						style="width:70%"
						v-model="ruleForm.value_lead"
						placeholder="请选择"
						filterable>
						<el-option
							v-for="item in formData"
							:key="item.id"
							:label="item.content"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</div>
		</el-form>
		<!-- 提交 -->
		<div class="flex flex-end">
			<div class="btn">
				<el-button
					@click="dialog = false"
					size="small">取消
				</el-button>
			</div>
			<div class="btn">
				<el-button
					type="primary"
					@click="submit()"
					size="small">确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props:["ifShow","formData"],
	watch:{
		ifShow(val){
			this.dialog = true;
		}
	},
	data() {
		return {
			dialog:false,
			ruleForm:{
				name:"",
				value_lead:"",
				list_lead:[]
			},
			rules:{
				name:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
					{
						max: 20,
						message: '不能超过20个字符',
						trigger: 'blur' ,
					}
				],
			},
			//上传
			fileName:''
		};
	},
	methods:{
		//提交
		submit:function(){
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					alert('submit!');
				}
			});
		},
		//打开附件
		openExl:function(e){
			this.$refs.file.click();
		},
		//选择附件
		getFile:function(e){
			console.log(e);
			this.fileName = e.target.files[0].name;
		}
	}
};
</script>

<style lang="scss" scoped>
	// 饿了么样式
	/deep/ .el-dialog__header{
		text-align: center;
	}
	/deep/ .el-textarea__inner{
		height: 100px;
	}
	//弹窗
	.new{
		.group{
			width: 90%;
			margin: 0 auto;
		}
	}
	.btn{
		margin-right: 20px;
	}
	.upload{
		width: 1px;
		height: 1px;
		opacity: 0;
	}
</style>
